import React from "react";
import { connect } from "react-redux";
import {NavLink,Route} from 'react-router-dom'
import { fetchList} from "../actions/productlist";


class ProductList extends React.Component {


  componentWillMount(){
    // console.log(this.props)
    this.props.fetchList()
    
  }

  render() {

    const { lists, fetchList } = this.props;

    var list=[];
    // console.log(22,lists)
    if(lists.docs){
        if(lists.docs.length<8){
             for(let i=0;i<lists.docs.length;i++){
                //  console.log(lists.docs[i].title)
                 list.unshift(
                    <div id='prolist' className='col-md-2	col-lg-2' key={i}>
                        <img id='propic' src={`../../public/img/${lists.docs[i].pic}`}/>
                        <h4 className='productlist'>商品：{lists.docs[i].title}</h4>
                        <p className='proprice'>价格：￥{lists.docs[i].price}</p>       
                    </div>
                 ) 
             }
        
         }else{
             for(let i=lists.docs.length-1;i>lists.docs.length-7;i--){
                 console.log(lists.docs[i].title)
                 list.push(
                    <div id='prolist' className=' col-md-2 col-lg-2' key={i}>
                      <img id='propic' src={`../../public/img/${lists.docs[i].pic}`}/>  
                      <h4 className='productlist'>商品：{lists.docs[i].title}</h4>
                      <p className='proprice'>价格：￥{lists.docs[i].price}</p>       
                    </div>
                 ) 
             }
         }
    }else{
     
    }
    
    return (
      <div>
        <h2>最新产品</h2>
        <div className='row'>
            {list}
        </div>
        
      </div>
    );
  }
}
const getValue = state => {
  // console.log(11,state.pros.lists);
  return {
    lists: state.pros.lists,
  };
};
export default connect(getValue, { fetchList})(ProductList);



